<template>
	<div class="onex-set-container">
		<a-descriptions title="整体风格" :column="5">
			<a-descriptions-item v-for="theme in ThemeStyle" :key="theme.value">
				<a-tooltip :title="theme.label">
					<div class="style-checbox-item" :class="{ active: $settingStore.oneXUI.themeMode === theme.value }" @click="setThemeMode(theme.value)">
						<XIcon :svg="icons[theme.value]" size="50" ></XIcon>
					</div>
				</a-tooltip>
			</a-descriptions-item>
		</a-descriptions>
		<a-descriptions title="导航模式" :column="5">
		  <a-descriptions-item v-for="item in UIMode" :key="item.value">
			<a-tooltip :title="item.label">
				<div class="style-checbox-item" :class="{ active: $settingStore.oneXUI.uiMode === item.value }" @click="setLayout(item.value)">
					<XIcon :svg="icons[item.value]" size="50" ></XIcon>
				</div>
			</a-tooltip>
		  </a-descriptions-item>
		</a-descriptions>
		<a-descriptions title="主题色" :column="9">
		  <a-descriptions-item v-for="item in ThemeColors" :key="item.key">
			<div class="style-checbox-item" :class="{active:$settingStore.oneXUI.colorPrimary == item.value}">
			  <a-tooltip :title="item.title">
				<a-tag :color="item.value" @click="setThemeColor(item.value)" >
				  <span>&nbsp&nbsp&nbsp&nbsp</span>
				</a-tag>
			  </a-tooltip>
			</div>
		  </a-descriptions-item>
		  <a-descriptions-item key="custom">
			<div class="style-checbox-item" :class="{ active : $settingStore.oneXUI.colorPrimary == customColor}">
			  <a-tooltip title="自定义" >
				<a-tag>
					<input v-model="customColor" type="color" @change="setThemeColor(customColor)" />
				</a-tag>
			  </a-tooltip>
			</div>
		  </a-descriptions-item>
		</a-descriptions>
	</div>
</template>

<script setup>
	import dark from "@/assets/icon/dark.svg";
	import light from "@/assets/icon/light.svg";
	import iside from "@/assets/icon/iside.svg";
	import itop from "@/assets/icon/itop.svg";
	import { ref, computed } from 'vue';
	import  XIcon  from '@/components/XIcon.vue';
	import { ThemeStyle,ThemeColors,UIMode } from '@/meta/constant';
	
	import {settingStore} from '@/stores/setting';
	const $settingStore = settingStore();

	const icons = {
		'dark':dark,
		'light':light,
		'top':itop,
		'side':iside,
	};
	const customColor = '#aaaaff';
	
	const setThemeMode = (themeMode)=> {
		$settingStore.oneXUI.themeMode = themeMode;
	}
	const setLayout = (uiMode) => {
		$settingStore.oneXUI.uiMode = uiMode;
	}
	const setThemeColor = (colorPrimary) => {
		$settingStore.setThemeColor(colorPrimary);
	};
</script>

<style scoped>
	.onex-set-container {
		width:100%;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		align-items:center;
	}
	.style-checbox-item {
		position: relative;
		cursor: pointer;
	}
	
	.active::after {
		content: '✔';
		position: absolute;
		right: 35%;
		bottom: 10%;
	}
		
	input[type='color'] {
		cursor: pointer;
		width: 20px;
		height: 100%;
		padding: 0;
		border: 0;
		outline: none;
		appearance: none;
		&::-webkit-color-swatch-wrapper {
			background: #FFFFFF;
		}
		&::-webkit-color-swatch {
		  display: none;
		}
	}
</style>